import React from 'react';
import { Avatar, Button, Card, Flex, List, Popconfirm, Space, Typography } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  DollarOutlined, WechatOutlined,
} from '@ant-design/icons';
import IconfontIcon from '@/components/icons/IconfontIcon';
import { PageContainer } from '@ant-design/pro-components';
import {useDrawerForm} from '@/uses/useForm';
import { createForm } from '@formily/core';
import { useNavigate } from '@umijs/max';

const { Text } = Typography;

const data = [
  {
    id: '1',
    title: '萌心芽抖音旗舰店',
    avatar: <IconfontIcon type="icon-doudian" style={{fontSize: 64}} />,
    typeName: '抖店',
  },
  {
    id: '2',
    title: '萌心芽淘宝旗舰店',
    avatar: <IconfontIcon type="icon-taobao" style={{fontSize: 64}}/>,
    typeName: '淘宝',
  },
  {
    id: '3',
    title: '萌心芽小红旗舰店',
    avatar: <IconfontIcon type="icon-xiaohongshu" style={{fontSize: 64}}/>,
    typeName: '小红书',
  },
  {
    id: '4',
    title: 'Title 4',
    avatar: <WechatOutlined style={{fontSize: 64}} />,
  },
  {
    id: '5',
    title: 'Title 5',
  },
  {
    id: '6',
    title: 'Title 6',
  },
];

const schema = {
  type: 'object',
  properties: {
    name: {
      title: '店铺名称',
      required: true,
      type: 'string',
      maxLength: 15,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    shopType: {
      title: '平台',
      required: true,
      type: 'number',
      enum: [
        {
          label: '小红书',
          value: 1,
        },
        {
          label: '淘宝',
          value: 2,
        },
        {
          label: '抖店',
          value: 3,
        },
      ],
      'x-decorator': 'FormItem',
      'x-component': 'Select',
    },
    apikey: {
      type: 'string',
      title: 'apikey',
      'x-decorator': 'FormItem',
      'x-component': 'Input.TextArea',
    },
    apisecret: {
      type: 'string',
      title: 'apisecret',
      'x-decorator': 'FormItem',
      'x-component': 'Input.TextArea',
    },
  },
}

const form = createForm()

const saveRequest = console.log
const detailRequest = (id:string) => {
  return {id}
}

type DetailInfo = {
  id: string;
  shopType: string;
  apikey: string;
  apisecret: boolean;
};


const emptyDetailInfo: DetailInfo = {
  id: '',
  shopType: '',
  apikey: '',
  apisecret: false,
}

const Page: React.FC = () => {
  const {showForm} = useDrawerForm({form, schema, saveRequest, detailRequest, emptyDetailInfo});
  let navigate = useNavigate();

  return (
    <div
      style={{
        background: '#F5F7FA',
      }}
    >
      <PageContainer
        extra={[
          <Button key="addShop" type="primary" onClick={async () => await showForm(null, () => {})}>
            新增店铺
          </Button>,
        ]}
      >
        <List
          grid={{
            gutter: 16,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 4,
          }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Card hoverable actions={[
                <Space key="manager" onClick={async () => navigate('/shop/detail')}><DollarOutlined /><Text>进入店铺</Text></Space>,
                <Space key="edit" onClick={async () => await showForm(item.id, ()=>{})}><EditOutlined /><Text>编辑</Text></Space>,
                <Space key="del">
                  <Popconfirm
                    title="删除"
                    description="你确定要删除？"
                    onConfirm={console.log}
                    onCancel={console.log}
                    okText="Yes"
                    cancelText="No"
                  >
                    <DeleteOutlined /><Text>删除</Text>
                  </Popconfirm>
                </Space>,
              ]}>
                <Flex justify="flex-start">
                  {item.avatar ? item.avatar : <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}

                  <Flex vertical align="flex-start" justify="space-between" style={{ padding: 8 }}>
                    <Typography.Title level={4} style={{ margin: 0 }}>
                      {item.title}
                    </Typography.Title>
                    <Text italic>{item.typeName ? item.typeName : '未知'}</Text>
                  </Flex>
                </Flex>
              </Card>
            </List.Item>
          )}
        />
      </PageContainer>
    </div>
  );
}

export default Page;
